<template>
    <view class="order-panel" @tap="goSelf(orderInfo)">
        <view class="order-panel-header">
            <view class="order-panel-time">
				<view>{{ orderInfo.create_time_desc }}</view>
			</view>
            <view class="order-panel-status" :style="{color: colorStyleForStatus(orderInfo.order_status)}">{{ orderInfo.order_status_desc }}</view>
        </view>
        <view class="order-panel-content">
            <view>
                <view class="nr normal">订单编号：{{ orderInfo.order_sn }}</view>
                <view class="nr normal mt20">下单机型：{{ orderInfo.goods_name }}</view>
            </view>
            <view class="column-center">
                <view class="normal">
                    <price 
                      :content="orderInfo.order_amount" 
                      color="#333333" 
                      mainSize="36rpx" 
                      minorSize="24rpx" 
                      :isSuffix="false" 
                    />
                </view>
                <view class="nr muted">{{ orderInfo.test_desc }}</view>
            </view>
        </view>
    </view>
</template>


<script>    
    export default {
        name: "recycle-order-list-panel",
        props: {
            data: {
                type: Object,
                required: true
            }
        },
        
        data() {
            return {
                orderInfo: {},  // 订单信息数据
            }
        },
        
        methods: {
            // 状态颜色
            colorStyleForStatus(stat) {
                switch(stat) {
                    case 0: return '#24A3FF';   // 待寄出
                    case 1: return '#666666';   // 待验机
                    case 2: return '#24A3FF';   // 待确认
                    case 3: return '#666666';   // 已完成
                    case 4: return '#666666';   // 已关闭
                    default: return '#666666';
                }
            },

            // 点击事件处理
            goSelf(data) {
                this.$emit('on-self', data.id);
            }
        },
        
        created() {
            this.orderInfo = this.data;
        }
    }
</script>


<style scoped>
    .order-panel {
        padding: 0 20rpx;
        border-radius: 10px;
        background-color: #FFFFFF;
    }
    
    .order-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        border-bottom: 1rpx dashed #E5E5E5;
        font-size: 26rpx;
    }
    
    .order-panel-time {
		display: flex;
		align-items: center;
        color: #999999;
    }
	
	.order-panel-sign {
		/* border: 1px solid #01D171; */
		color: #FFFFFF;
		border-radius: 2px;
		padding: 0 4rpx;
		margin-right: 10rpx;
		background-color: #01D171;
	}
    
    .order-panel-status {
        color: #666666;
    }
    
    .order-panel-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 160rpx;
    }
</style>
